সিএসএস (ইংরেজি: CSS )একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।
একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।
আমাদের এই চিএসএস টিউটোরিয়ালটি আপনাকে সিএসএস এর প্রাথমিক থেকে এডভান্স পর্যন্ত শিখতে সাহায্য করবে।
আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড
copyকরার একটি অপশন দেখতে পাবেন।copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।আপনি আপনার এডিটর ওপেন করে
copyকরা কোডpasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
kt_satt_skill_example_id=1285
.css এক্সটেনশন দিতে হয়সিএসএস তিনটি অংশ নিয়ে কাজ করে:
h1, .class, #id।color, font-size, margin।red, 16px, 10px।h1 {
color: red; /* প্রোপার্টি: color, মান: red */
font-size: 20px; /* প্রোপার্টি: font-size, মান: 20px */
}
সিএসএস HTML ডকুমেন্টে তিনটি উপায়ে যুক্ত করা যায়:
HTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে সিএসএস প্রয়োগ করা হয়।
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
HTML ডকুমেন্টের <head> সেকশনে <style> ট্যাগ ব্যবহার করে সিএসএস কোড লেখা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
font-size: 28px;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
</body>
</html>
একটি আলাদা .css ফাইল তৈরি করে HTML ডকুমেন্টে সংযুক্ত করা হয়।
<!-- HTML ফাইল -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS</h1>
</body>
</html>
/* styles.css ফাইল */
h1 {
color: purple;
font-size: 30px;
}
নির্বাচকের মাধ্যমে নির্দিষ্ট HTML উপাদান নির্বাচন করে তার উপর স্টাইল প্রয়োগ করা হয়।
ইলিমেন্ট সিলেক্টর (Element Selector): নির্দিষ্ট ট্যাগের উপর স্টাইল প্রয়োগ।
p {
color: blue;
}
ক্লাস সিলেক্টর (Class Selector): একটি বা একাধিক উপাদানে স্টাইল প্রয়োগ করতে . ব্যবহার।
.highlight {
background-color: yellow;
}
আইডি সিলেক্টর (ID Selector): নির্দিষ্ট একটি উপাদানের উপর স্টাইল প্রয়োগ করতে # ব্যবহার।
#main-title {
font-weight: bold;
}
গ্রুপ সিলেক্টর (Group Selector): একাধিক উপাদানের উপর একই স্টাইল প্রয়োগ।
h1, h2, h3 {
color: red;
}
সন্তান সিলেক্টর (Child Selector): নির্দিষ্ট সন্তানের উপর স্টাইল প্রয়োগ।
div > p {
color: green;
}
h1 {
color: blue; /* টেক্সটের রঙ */
font-size: 24px; /* টেক্সটের আকার */
text-align: center; /* টেক্সট কেন্দ্রিভূত */
font-family: Arial, sans-serif; /* ফন্ট স্টাইল */
}
div {
border: 2px solid black; /* বর্ডার */
margin: 10px; /* বাইরের দূরত্ব */
padding: 20px; /* অভ্যন্তরীণ দূরত্ব */
}
body {
background-color: lightgray; /* ব্যাকগ্রাউন্ড রঙ */
background-image: url('background.jpg'); /* ব্যাকগ্রাউন্ড ইমেজ */
background-size: cover; /* ইমেজ পুরোপুরি কভার করবে */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.container {
padding: 20px;
}
h1 {
color: #444;
font-size: 28px;
text-align: left;
}
p {
color: #666;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Welcome to CSS Basics</h1>
</header>
<div class="container">
<h1>What is CSS?</h1>
<p>CSS stands for <span class="highlight">Cascading Style Sheets</span>. It is used to style HTML elements.</p>
</div>
</body>
</html>
এই সিএসএস ব্যাসিক টিউটোরিয়ালটি দিয়ে আপনি সিএসএস-এর মূল ধারণাগুলি শিখে সহজেই ওয়েব পেজের স্টাইল তৈরি করতে পারবেন।
সিএসএস (ইংরেজি: CSS )একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।
একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।
আমাদের এই চিএসএস টিউটোরিয়ালটি আপনাকে সিএসএস এর প্রাথমিক থেকে এডভান্স পর্যন্ত শিখতে সাহায্য করবে।
আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড
copyকরার একটি অপশন দেখতে পাবেন।copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।আপনি আপনার এডিটর ওপেন করে
copyকরা কোডpasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
kt_satt_skill_example_id=1285
.css এক্সটেনশন দিতে হয়সিএসএস তিনটি অংশ নিয়ে কাজ করে:
h1, .class, #id।color, font-size, margin।red, 16px, 10px।h1 {
color: red; /* প্রোপার্টি: color, মান: red */
font-size: 20px; /* প্রোপার্টি: font-size, মান: 20px */
}
সিএসএস HTML ডকুমেন্টে তিনটি উপায়ে যুক্ত করা যায়:
HTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে সিএসএস প্রয়োগ করা হয়।
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
HTML ডকুমেন্টের <head> সেকশনে <style> ট্যাগ ব্যবহার করে সিএসএস কোড লেখা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
font-size: 28px;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
</body>
</html>
একটি আলাদা .css ফাইল তৈরি করে HTML ডকুমেন্টে সংযুক্ত করা হয়।
<!-- HTML ফাইল -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS</h1>
</body>
</html>
/* styles.css ফাইল */
h1 {
color: purple;
font-size: 30px;
}
নির্বাচকের মাধ্যমে নির্দিষ্ট HTML উপাদান নির্বাচন করে তার উপর স্টাইল প্রয়োগ করা হয়।
ইলিমেন্ট সিলেক্টর (Element Selector): নির্দিষ্ট ট্যাগের উপর স্টাইল প্রয়োগ।
p {
color: blue;
}
ক্লাস সিলেক্টর (Class Selector): একটি বা একাধিক উপাদানে স্টাইল প্রয়োগ করতে . ব্যবহার।
.highlight {
background-color: yellow;
}
আইডি সিলেক্টর (ID Selector): নির্দিষ্ট একটি উপাদানের উপর স্টাইল প্রয়োগ করতে # ব্যবহার।
#main-title {
font-weight: bold;
}
গ্রুপ সিলেক্টর (Group Selector): একাধিক উপাদানের উপর একই স্টাইল প্রয়োগ।
h1, h2, h3 {
color: red;
}
সন্তান সিলেক্টর (Child Selector): নির্দিষ্ট সন্তানের উপর স্টাইল প্রয়োগ।
div > p {
color: green;
}
h1 {
color: blue; /* টেক্সটের রঙ */
font-size: 24px; /* টেক্সটের আকার */
text-align: center; /* টেক্সট কেন্দ্রিভূত */
font-family: Arial, sans-serif; /* ফন্ট স্টাইল */
}
div {
border: 2px solid black; /* বর্ডার */
margin: 10px; /* বাইরের দূরত্ব */
padding: 20px; /* অভ্যন্তরীণ দূরত্ব */
}
body {
background-color: lightgray; /* ব্যাকগ্রাউন্ড রঙ */
background-image: url('background.jpg'); /* ব্যাকগ্রাউন্ড ইমেজ */
background-size: cover; /* ইমেজ পুরোপুরি কভার করবে */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.container {
padding: 20px;
}
h1 {
color: #444;
font-size: 28px;
text-align: left;
}
p {
color: #666;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Welcome to CSS Basics</h1>
</header>
<div class="container">
<h1>What is CSS?</h1>
<p>CSS stands for <span class="highlight">Cascading Style Sheets</span>. It is used to style HTML elements.</p>
</div>
</body>
</html>
এই সিএসএস ব্যাসিক টিউটোরিয়ালটি দিয়ে আপনি সিএসএস-এর মূল ধারণাগুলি শিখে সহজেই ওয়েব পেজের স্টাইল তৈরি করতে পারবেন।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
